<template>
  <div>
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-alert v-show="showWarning" :message="warningText" banner class="a_alert" />
        <div class="form-label">手机号</div>
      <a-form-model-item required prop="username">
        <a-input :maxLength="11" v-model.trim="model.username" size="large" placeholder="请输入您的手机号">
          <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
        </a-input>
      </a-form-model-item>
        <div class="form-label">密码</div>
      <a-form-model-item required prop="password">
        <a-input :maxLength="12" v-model.trim="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码">
          <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item required prop="jSlider">
        <div class="form-label">验证</div>
        <j-slider :key="jSliderIndex" @onSuccess="handleJSliderSuccess"/>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { postAction } from '@/api/manage'
import { mapActions } from 'vuex'
const regex = /^1[23456789]\d{9}$/
export default {
  name: 'LoginAccount',
  data() {
    return {
      currdatetime: '',
      loginType: 0,
      model: {
        username: '',
        password: '',
        jSlider: ''
      },
      validatorRules: {
        username: [{ required: true, message: '请输入您的手机号!' }, { validator: this.handleUsernameOrEmail }],
        password: [
          {
            required: true,
            // message: '请输入登录密码!',
            validator: this.checkPassword,
          },
        ],
        jSlider: [
          {
            required: true,
            message: '请拖动滑块验证!',
          },
        ],
      },
      jSliderIndex: 1.2,
      loginfo: [],
      warningText: '',
      showWarning: false
    }
  },
  created() {
    this.handleChangeCheckCode()
  },
  methods: {
    handleJSliderSuccess(value) {
      this.model.jSlider = value
      this.$refs['form'].validateField('jSlider', (err) => {})
    },
    ...mapActions(['Login']),
    /**刷新验证码*/
    handleChangeCheckCode() {
      this.model.jSlider = ''
      this.jSliderIndex += 1
      this.currdatetime = new Date().getTime()
    },
    // 判断密码格式
    checkPassword(rule, value, callback) {
      const regex = /^[\d\w!@#$%^&*()_+=[\]{}|\\,.? -]{6,12}$/
      if (!value) {
        callback(new Error('请输入登录密码!'))
        return
      }
      if (!regex.test(value)) {
        callback(new Error('登录密码格式不正确'))
      } else {
        callback()
      }
    },
    // 判断登录类型
    handleUsernameOrEmail(rule, value, callback) {
      if (regex.test(value)) {
        callback()
      } else {
        callback('请输入正确的手机号')
      }
    },
    /**
     * 验证字段
     * @param arr
     * @param callback
     */
    validateFields(arr, callback) {
      let promiseArray = []
      for (let item of arr) {
        let p = new Promise((resolve, reject) => {
          this.$refs['form'].validateField(item, (err) => {
            if (!err) {
              resolve()
            } else {
              reject(err)
            }
          })
        })
        promiseArray.push(p)
      }
      Promise.all(promiseArray)
        .then(() => {
          callback()
        })
        .catch((err) => {
          callback(err)
        })
    },
    acceptUsername(username) {
      this.model['username'] = username
    },
    alertWarning(text) {
      this.warningText = text
      this.showWarning = true
      setTimeout(() => {
        this.showWarning = false
      }, 3000);
    },
    //账号密码登录
    handleLogin() {
      if (this.model.password.length > 0 && this.model.username == '') {
        // this.alertWarning('手机号未输入')
      } else if (this.model.username.length > 0 && this.model.password == '') {
        // this.alertWarning('密码未输入')
      } else if (this.model.username == '' && this.model.password == '') {
        // this.alertWarning('手机号密码未输入')
      }
      this.validateFields(['username', 'password', 'jSlider'], (err) => {
        if (!err) {
          let loginParams = {
            username: this.model.username,
            password: this.model.password,
            isTenant: '1'
          }
          this.$emit('success', loginParams)
        } else {
          this.$emit('validateFail')
        }
      })
    },
  },
}
</script>

<style scoped>
.form-label {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  margin-bottom: 16px;
  color: #101328;
}
.ant-form-item {
  margin-bottom: 10px!important;
}
.a_alert {
  position: absolute;
  width: 300px;
  height: 44px;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>